.chat-page {
    .nav-content {
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background: #fff;

        .left {
            height: 100%;
            display: flex;
            align-items: center;
            position: absolute;
            left: 8px;

            .avatar {
                margin-right: 10px;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;

                .avatar-img {
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                }
            }
        }

        .center {
            display: flex;
            flex-direction: column;
            align-items: center;
            .title {
                font-weight: 500;
                font-size: 16px;
                color: $xboot-text-color;
            }

            .desc {
                font-size: 12px;
                color: $xboot-text-color-grey;
            }
        }

        .right {
            height: 100%;
            display: flex;
            align-items: center;
            position: absolute;
            right: 15px;

            .iconfont {
                font-size: 25px;
                color: $xboot-icon-color;
            }

            .r {
                margin-right: 20px;
            }

            .r2 {
                margin-right: 3px !important;
            }

            .top {
                margin-top: 2px !important;
            }
        }
    }

    .menu-item {
        padding: 12px 16px;
        display: flex;
        align-items: center;
        position: relative;
        background: #fff;

        .menu-icon-img {
            width: 20px;
            height: 20px;
            margin-right: 10px;
        }

        .txt {
            font-size: 15px;
            color: $xboot-text-color;
        }

        &:hover {
            background: $xboot-bg-color-hover;
        }

        &::after {
            content: '';
            position: absolute;
            border-bottom: 1px solid #eaeef1;
            -webkit-transform: scaleY(0.5);
            transform: sc8aleY(0.5);
            bottom: 0;
            right: 16px;
            left: 16px;
        }
    }

    .content {
        padding: 0 0 25px 0;
        padding-top: calc(var(--status-bar-height) + 44px);
        display: flex;
        box-sizing: border-box;
        flex-direction: column;
        background: #EDEDED;
        
        height: 1200px;
    }

}